<template>
    <div class="container">
        <div class="menu-bg"></div>
        <div class="header">
            <div class="nav-top">
                <div class="nav-profile">
                    <span class="user" v-if="!userInfo" @click="gotoRouter('/login')"
                        >你好，游客</span
                    >
                    <span class="user" v-else>
                        你好，{{
                            userInfo.nickname || userInfo.name || userInfo.primary_id || '游客'
                        }}</span
                    >
                    <span>消息 0</span>
                </div>
                <ul class="nav-menu">
                    <li class="nav-item" ref="order" id="order" @click="gotoRouter('/order')">
                        我的订单
                    </li>
                    <li class="nav-item" ref="car" id="car" @click="gotoRouter('/cart')">
                        <span class="iconfont icon-gouwuchexuanzhong"></span>购物车
                    </li>
                    <li class="nav-item" id="shop" ref="shop" @click="gotoRouter('/user_detail')">
                        <span v-if="userInfo.role === 'shop'">商家入口</span>
                        <span v-else-if="userInfo.role === 'vip'">VIP用户</span>
                        <span v-else>用户入口</span>
                    </li>
                </ul>
            </div>
            <div class="nav-bottom" v-if="isDisSearch">
                <div class="nav-logo"></div>
                <div
                    class="nav-search"
                    @click="
                        () => {
                            router.push('/search')
                        }
                    "
                >
                    <input
                        type="text"
                        v-model="keywords"
                        class="search-input"
                        placeholder="请输入 商品/店铺"
                    />
                    <span class="search-btn" @click="search">搜&nbsp;&nbsp;索</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserInfo } from '../store/index'

const { userInfo } = useUserInfo()
const router = useRouter()
const route = useRoute()
const { path } = route
const order = ref(null)
const car = ref(null)
const shop = ref(null)
const keywords = ref('')

const emits = defineEmits(['search'])

const props = defineProps({
    isDisSearch: {
        type: Boolean,
        default: true
    }
})
console.log('🚀 ~ This is a result of console.log ~ ✨: ', userInfo);

onMounted(() => {
    if (path === '/order') {
        order.value.classList.add('activeRoute')
    } else if (path === '/cart') {
        car.value.classList.add('activeRoute')
    } else if (path === '/user_detail') {
        shop.value.classList.add('activeRoute')
    }
})

const gotoRouter = (path) => {
    if (!userInfo) {
        router.push('/login')
        return
    }
    router.push(path)
}

// 搜索词
const search = () => {
    emits('search', keywords.value)
}
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    .menu-bg {
        height: 30px;
        background-color: #f2f2f2;
        border-bottom: 1px solid #e5e5e5;
        position: absolute;
        width: 100%;
        z-index: -1;
    }

    .header {
        // height: 130px;
        width: 1120px;
        margin: 0 auto;

        .nav-top {
            color: #999999;
            font-size: 12px;
            height: 30px;
            display: flex;
            justify-content: space-between;

            .nav-profile {
                span {
                    margin-right: 17px;
                    line-height: 30px;
                    cursor: pointer;
                }

                .user {
                    color: #e6a23c;
                    font-size: 14px;
                }
            }

            .nav-menu {
                width: 240px;
                line-height: 30px;

                .nav-item {
                    display: inline-block;
                    margin-left: 14px;
                    cursor: pointer;
                    &:hover {
                        color: red;
                    }
                }
                #shop {
                    cursor: pointer;
                }
                .activeRoute {
                    color: red;
                }
            }
        }

        .nav-bottom {
            height: 100px;
            display: flex;
            justify-content: space-between;

            .nav-logo {
                width: 200px;
                background-image: url('../assets/logo.png');
                background-repeat: no-repeat;
                height: 80px;
                margin: auto 0;
                background-size: contain;
            }

            .nav-search {
                width: 307px;
                line-height: 100px;

                .search-input {
                    width: 230px;
                    padding-left: 6px;
                    outline: none;
                    border: 2px solid #95bf47;
                    vertical-align: middle;
                    line-height: 31px;
                }

                .search-btn {
                    display: inline-block;
                    line-height: 36px;
                    color: #fff;
                    font-weight: 600;
                    background-color: #95bf47;
                    vertical-align: middle;
                    cursor: pointer;
                    padding: 0 17px;
                }
            }
        }
    }
    .divdior {
        height: 3px;
        background-color: #95bf47;
    }
}
</style>
